<template>
	<view class="fight-box">
		<view class="fight-background">
		</view>
		<view class="userUI">
			<view class="jingLingMsg">
				<view class="playerJingLing">
					<view class="xueliangBox" v-if="nowPlayJingLing">
							<view class="headImage">
								<image :src="nowPlayJingLing.headImageUrl"
									mode="aspectFill"></image>
							</view>
							<view class="rightDetail">
								<view class="tiLiNum">
									<span>{{nowPlayJingLing.shu_xing_zhi[0]+'/'+playTili}}</span>
								</view>
								<view class="xueliangtiao">
									<view class="shade xueliangColor"
										:style="`width:${((nowPlayJingLing.shu_xing_zhi[0]/playTili)*100).toFixed(0)}%`">
									</view>
								</view>
								<view class="detail">
									<view class="leftDetail">
										<view class="info">
											<view class="shuxingCoin">
												{{nowPlayJingLing.shu_xing_No}}
											</view>
											<view class="name">
												{{nowPlayJingLing.name}}
											</view>
										</view>
										<view class="level">
											{{nowPlayJingLing.level}}
										</view>
									</view>
									<view class="groupNum">
										{{playerArr.length}}
									</view>
								</view>
							</view>
					</view>
					<view class="jingLing">
						<image v-if="nowPlayJingLing" :src="nowPlayJingLing.fightGIF"
							mode="scaleToFill"></image>
					</view>
				</view>
				<view class="time">
					{{fightTime}}
				</view>
				<view class="matcherJingLing">
					<view class="xueliangBox" v-if="nowMatchJingLing">
						<view class="rightDetail">
							<view class="tiLiNum">
								<span style="opacity: 0;">占位</span>
							</view>
							<view class="xueliangtiao">
								<view class="shade xueliangColor"
									:style="`width:${((nowMatchJingLing.shu_xing_zhi[0]/matchTili)*100).toFixed(0)}%`">
								</view>
							</view>
							<view class="detail">
								<view class="groupNum">
									{{matcherArr.length}}
								</view>
								<view class="leftDetail">
									<view class="info">
										<view class="name">
											{{nowMatchJingLing.name}}
										</view>
										<view class="shuxingCoin">
											{{nowMatchJingLing.shu_xing_No}}
										</view>
									</view>
									<view class="level" style="text-align: right;">
										{{nowMatchJingLing.level}}
									</view>
								</view>
							</view>
						</view>
						<view class="headImage">
							<image :src="nowMatchJingLing.headImageUrl"
								mode="aspectFill"></image>
						</view>
					</view>
					<view class="jingLing" style="transform: rotateY(180deg);">
						<image v-if="nowMatchJingLing" :src="nowMatchJingLing.fightGIF"
							mode="scaleToFill"></image>
					</view>
				</view>
			</view>
			<view class="playerUI">
				<view class="playerOption">
					<view class="option" v-if="nowPlayJingLing&&nowPlayJingLing.jingLingJiNeng.length&&active==1">
						<view class="jiNeng" v-for="item in nowPlayJingLing.jingLingJiNeng" :key="item.name">
							<skill-card :disabled="roundDisabled" :item="item"
								style="flex: 1;height: 100%;display: flex;align-items: center;"
								@clickJiNeng="clickJiNeng"></skill-card>
						</view>
					</view>
				</view>
				<view class="otherSetting">
					<view :class="`settingButton vintage ${active==1?'active':''}`" @click="changeActive(1)">
						战斗
					</view>
					<view :class="`settingButton vintage ${active==2?'active':''}`" @click="changeActive(2)">
						道具
					</view>
					<view :class="`settingButton vintage ${active==3?'active':''}`" @click="changeActive(3)">
						精灵
					</view>
					<view :class="`settingButton vintage ${active==4?'active':''}`" @click="runAwayFn">
						逃跑
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="resultPopup" type="dialog">
			<uni-popup-dialog mode="base" type="info" :content=resultMsg :duration="2000" title="战斗结束"
				:before-close="true" :showClose="false" @confirm="confirmDialog"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref,
		watch,
		watchEffect
	} from 'vue';
	import skillCard from "./skillCard/skillCard.vue"
	import {
		getShuXing
	} from '../../commonMethods/base_index';
	import {
		getHurt
	} from '../../commonMethods/fight';
import utils from '../../common/utils';
import { probability } from '../../commonMethods/base';
	components: {
		skillCard
	}

	const props = defineProps({
		fightObj: {
			type: Object,
			default: {
				player: {},
				matcher: {}
			}
		}
	})
	const fightTime = ref(0)
	const initFightTime = 10
	const emit = defineEmits(["getResult"])
	let active = ref(1)
	let roundDisabled = ref(false)
	let jishiqi = ref(null)
	let nowPlayJingLing = reactive(null)
	let nowMatchJingLing = reactive(null)
	let playerArr = ref(null)
	let matcherArr = ref(null)
	let playTili = ref(0)
	let matchTili = ref(0)
	let resultPopup = ref(null)
	let resultMsg = ref("")

	watch(props, (newVal, oldVal, onCleanup) => {
		playerArr.value = JSON.parse(JSON.stringify(newVal.fightObj.player))
		matcherArr.value = JSON.parse(JSON.stringify(newVal.fightObj.matcher))
		if (playerArr.value.length != 0) {
			playerArr.value.forEach(item => {
				if(item.shu_xing_zhi&&(item.shu_xing_zhi[0]||item.shu_xing_zhi[0]==0)){
					getShuXing(item).forEach((items,index)=>{
						if(index==0){
							playTili.value = items
						}else{
							item.shu_xing_zhi[index] = items
						}
					})
				}else{
					item.shu_xing_zhi = getShuXing(item)
				}
			})
		}
		if (matcherArr.value.length != 0) {
			matcherArr.value.forEach(item => {
				if(item.shu_xing_zhi&&(item.shu_xing_zhi[0]||item.shu_xing_zhi[0]==0)){
					getShuXing(item).forEach((items,index)=>{
						if(index==0){
							matchTili.value = items
						}else{
							item.shu_xing_zhi[index] = items
						}
					})
				}else{
					item.shu_xing_zhi = getShuXing(item)
					matchTili.value = item.shu_xing_zhi[0]
				}
			})
		}
		nowPlayJingLing = playerArr.value[0]
		nowMatchJingLing = matcherArr.value[0]
		//进入并接收传递的对战双方数据
		onCleanup(() => {
		});
		//保持一个定时器
		fightTime.value = "∞" //暂时不做计时逻辑
		// if (jishiqi.value) {
		// 	clearInterval(jishiqi.value)
		// 	jishiqi.value = null
		// }
		// jishi()
	})

	onMounted(() => {
		fightTime.value = initFightTime
	})
	const confirmDialog = () => {
		//结束
		resultPopup.value.close()
		emit("getResult", resultMsg.value)
	}
	const jishi = () => {
		jishiqi.value = setInterval(() => {
			fightTime.value--
			if (fightTime.value == 0) {
				clearInterval(jishiqi.value)
				console.log("到时间了")
				jishiqi.value = null
				// 再次启动定时器需要设置时间
				fightTime.value = initFightTime
			}
		}, 1200)
	}
	const runAwayFn = () => {
		//逃跑
		resultMsg.value = "逃跑成功"
		resultPopup.value.open()
	}

	const changeActive = (activeNum) => {
		active.value = activeNum
	}

	const clickJiNeng = (jiNeng) => {
		jiNeng.PP[0]--
		roundDisabled.value = true
		if (true) { //判断野生
			//野生直接随机出招
			let randomNumber = Number((Math.random() * 3).toFixed()) //[0-3]
			let macherJiNeng = nowMatchJingLing.jingLingJiNeng[randomNumber]
			roundSettlement(jiNeng, nowPlayJingLing.shu_xing_zhi, macherJiNeng, nowMatchJingLing
				.shu_xing_zhi) //这里不应该直接结算回合  应该等待对手出招
		} else {
			//等待对手出招
		}
	}

	const roundSettlement = (playerJiNeng, playerShuXing, matcherJiNeng, matcherShuXing) => {
		let {
			attack,
			defence
		} = getAttack(playerJiNeng, playerShuXing, matcherJiNeng, matcherShuXing)
		if (attack && defence) {
			//正面进攻
			let hurt = null
			if(probability(0.0625)){
				hurt = 0
			}else{
				hurt = getHurt(attack, defence)
			}
			if (defence.shu_xing[0] - hurt < 0) {
				defence.shu_xing[0] = 0
				let temp = saveWatch()
				if (temp) {
					//换人
				}
			} else {
				defence.shu_xing[0] = defence.shu_xing[0] - hurt
				//反击
				let defenceHurt = null
				if(probability(0.0625)){
					defenceHurt = 0
				}else{
					defenceHurt = getHurt(defence, attack)
				}
				if (attack.shu_xing[0] - defenceHurt < 0) {
					attack.shu_xing[0] = 0
					let temp = saveWatch()
					if (temp) {
						//换人
					}
				} else {
					attack.shu_xing[0] = attack.shu_xing[0] - defenceHurt
				}
			}
			roundDisabled.value = false
		}
	}
	const getAttack = (playerJiNeng, playerShuXing, matcherJiNeng, matcherShuXing) => {
		let attack = {}
		let defence = {}
		if (playerShuXing[5] > matcherShuXing[5]) {
			//玩家是先速
			attack.shu_xing = playerShuXing
			attack.ji_neng = playerJiNeng
			attack.level = nowPlayJingLing.level
			attack.shu_xing_No = nowPlayJingLing.shu_xing_No
			defence.shu_xing = matcherShuXing
			defence.ji_neng = matcherJiNeng
			defence.level = nowMatchJingLing.level
			defence.shu_xing_No = nowMatchJingLing.shu_xing_No
		} else if (playerShuXing[5] < matcherShuXing[5]) {
			//对手先速
			attack.shu_xing = matcherShuXing
			attack.ji_neng = matcherJiNeng
			attack.level = nowMatchJingLing.level
			attack.shu_xing_No = nowMatchJingLing.shu_xing_No
			defence.shu_xing = playerShuXing
			defence.ji_neng = playerJiNeng
			defence.level = nowPlayJingLing.level
			defence.shu_xing_No = nowPlayJingLing.shu_xing_No
		} else {
			判断属性总和决定先手
			if (playerShuXing.sum() > matcherShuXing.sum()) {
				//玩家先速
				attack.shu_xing = playerShuXing
				attack.ji_neng = playerJiNeng
				attack.level = nowPlayJingLing.level
				attack.shu_xing_No = nowPlayJingLing.shu_xing_No
				defence.shu_xing = matcherShuXing
				defence.ji_neng = matcherJiNeng
				defence.level = nowMatchJingLing.level
				defence.shu_xing_No = nowMatchJingLing.shu_xing_No
			} else if (playerShuXing.sum() < matcherShuXing.sum()) {
				//对手先速
				attack.shu_xing = matcherShuXing
				attack.ji_neng = matcherJiNeng
				attack.level = nowMatchJingLing.level
				attack.shu_xing_No = nowMatchJingLing.shu_xing_No
				defence.shu_xing = playerShuXing
				defence.ji_neng = playerJiNeng
				defence.level = nowPlayJingLing.level
				defence.shu_xing_No = nowPlayJingLing.shu_xing_No
			} else {
				//判断不了中断回合
				attack = null
				defence = null
			}
		}
		return {
			attack,
			defence
		}
	}

	const saveWatch = () => {
		//这里更新playerArr
		utils.requestCloudDB("update",{
			collection: "user_jing_ling",
			whereParam: {
				user_id: nowPlayJingLing.user_id,
				_id:nowPlayJingLing._id
			},
			data:nowPlayJingLing
		},(res)=>{
			console.log(res)
		})
		let playStillSave = false
		let matchStillSave = false
			playerArr.value.forEach(item => {
				if (item.shu_xing_zhi[0] != 0) {
					//自己还有活着的
					playStillSave = true
				}
			})
			matcherArr.value.forEach(item => {
				if (item.shu_xing_zhi[0] != 0) {
					//对手还有活着的
					matchStillSave = true
				}
			})
		if (!playStillSave && matchStillSave) {
			//玩家GG
			resultMsg.value = "可惜，战斗失败"
			resultPopup.value.open()
		}
		if (!matchStillSave && playStillSave) {
			//玩家胜利
			resultMsg.value = "恭喜，战斗胜利"
			resultPopup.value.open()
		}
		if (playStillSave && matchStillSave) {
			return true
		} else {
			return false
		}
	}
</script>

<style scoped>
	.fight-box {
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: 200;
		background-color: #fff;
	}

	.fight-background {
		width: 100%;
		height: 100%;
		background: url("@/static/image/map1.png") center no-repeat;
		background-size: contain;
		position: absolute;
		z-index: -1;
	}

	.userUI {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.jingLingMsg {
		flex: 2;
		display: flex;
		justify-content: space-around;
	}

	.time {
		width: 80rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.playerJingLing {
		flex: 1;
	}

	.jingLing {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
	}

	.matcherJingLing {
		flex: 1;
	}

	.playerUI {
		height: 150px;
		display: flex;
		flex-direction: row;
	}

	.playerOption {
		flex: 1;
	}

	.option {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.otherSetting {
		display: flex;
		width: 150px;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	.settingButton {
		box-sizing: border-box;
		width: 50%;
		height: 50%;
		line-height: 75px;
		text-align: center;
	}

	.active {
		background: #ccc;
	}

	.jiNeng {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100%;
		flex: 1;
	}

	.noShow {
		display: none;
	}

	.xueliangBox {
		position: relative;
		border: 1px solid #ccc;
		display: flex;
		height:90px;
	}
	.headImage{
		height: 100%;
		width: 90px;
	}
	.rightDetail{
		height:100%;
		flex: 1;
	}
	.tiLiNum{
		text-align: right;
	}
	.xueliangtiao{
		height: 25px;
		width: 100%;
		position: relative;
	}
	.shade {
		position: absolute;
		z-index: -1;
		height: 100%;
	}
	.detail{
		display: flex;
		justify-content: space-between;
	}
	.leftDetail{
		display: flex;
		flex-direction: column;
	}
	.info{
		display: flex;
	}
</style>